<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/prop-types.js"></script>
    <title>demo6 ref_createRef</title>
  </head>
  <body>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
	<script type="text/babel">
     //1.创建组件
    class Demo extends React.Component{

      /*
      React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是“专人专用”
      */
      myRef = React.createRef()
      myRef2 = React.createRef()

      //展示左侧输入框数据
      showData = ()=>{
        console.log(this.myRef)
        alert(this.myRef.current.value);
      }

      showData2 = ()=>{
        console.log(this.myRef2)
        alert(this.myRef2.current.value);
      }
  
      render(){
        return (
          <div>
            <input ref={this.myRef} type="text" placeholder=""/>&nbsp;
            <button onClick={this.showData}>点我提示左侧数据</button>&nbsp;
            <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
          </div>
        )
      }
    }



    //渲染组件到页面
    ReactDOM.render(<Demo name="tom" speak="speak"/>,document.getElementById('example1'))

	</script>
  </body>
</html>
